<template>
	<view class="h100 oya"
		:style="current == 0 ? 'padding-bottom: 160rpx;box-sizing: border-box;' : 'padding-bottom: 20rpx;box-sizing: border-box;' ">
		<view class="m-t-10 item">
			<up-text :text="data.告警信息" class="item-p" size="16" color="#333333" />
			<view class="flex s-center m-t-4">
				<view class="f1 w0">
					<template v-for="(item2,i) in list">
						<view class="flex item-p">
							<view class="flex s-center">
								<image :src="getImgUrl(item2.img)" mode="widthFix" style="width: 30rpx;height: 32rpx;"
									class="m-r-5" />
								<up-text :text="`${item2.title}：`" color="#525866" size="14" />
							</view>
							<up-text :text="data[item2.key]" :lines="1" color="#7F899F" size="14" />
						</view>
					</template>
				</view>
				<up-tag :text="data.告警级别" plain shape="circle" size="mini" />
			</view>
		</view>

		<u-collapse :value="['1']" ref="collapse" class="m-x-10 m-t-10">
			<u-collapse-item name="1" v-if="current == 2" class="m-b-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">处理信息</text></view>
				</template>
				<view>
					<up-text :text="data.处理措施" size="16" color="#333333" />
					<view class="flex m-t-8">
						<view class="flex s-center">
							<image :src="getImgUrl('msg/clr.png')" mode="widthFix" style="width: 30rpx;height: 32rpx;"
								class="m-r-5" />
							<up-text text="处理人：" color="#525866" size="14" />
						</view>
						<up-text :text="data.处理人" :lines="1" color="#7F899F" size="14" />
					</view>
					<view class="flex  m-y-4">
						<view class="flex s-center">
							<image :src="getImgUrl('msg/clsj.png')" mode="widthFix" style="width: 30rpx;height: 32rpx;"
								class="m-r-5" />
							<up-text text="处理时间：" color="#525866" size="14" />
						</view>
						<up-text :text="data.处理时间" :lines="1" color="#7F899F" size="14" />
					</view>
				</view>
			</u-collapse-item>

			<u-collapse-item name="1" v-if="data.处理中人" class="m-b-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">处理中信息</text></view>
				</template>
				<view>
					<up-text :text="data.处理中措施" size="16" color="#333333" />
					<view class="flex m-t-8">
						<view class="flex s-center">
							<image :src="getImgUrl('msg/clr.png')" mode="widthFix" style="width: 30rpx;height: 32rpx;"
								class="m-r-5" />
							<up-text text="处理人：" color="#525866" size="14" />
						</view>
						<up-text :text="data.处理中人" :lines="1" color="#7F899F" size="14" />
					</view>
					<view class="flex  m-y-4">
						<view class="flex s-center">
							<image :src="getImgUrl('msg/clsj.png')" mode="widthFix" style="width: 30rpx;height: 32rpx;"
								class="m-r-5" />
							<up-text text="处理时间：" color="#525866" size="14" />
						</view>
						<up-text :text="data.处理中时间" :lines="1" color="#7F899F" size="14" />
					</view>
				</view>
			</u-collapse-item>

			<u-collapse-item name="1" v-if='tableData.length > 0'>
				<template #title>
					<view class="content-item-title"><text class="title-txt">转派列表</text></view>
				</template>
				<view v-for="(item,i) in tableData" :key="i" class="item2">
					<up-text :text="item.transferReason" size="16" color="#333333" />
					<template v-for="(item2,i) in columns2">
						<view class="flex m-t-4">
							<view>
								<up-text :text="`${item2.label}：`" color="#525866" size="14" />
							</view>
							<up-text :text="item[item2.prop]" :lines="1" color="#7F899F" size="14" />
						</view>
					</template>
				</view>
			</u-collapse-item>
		</u-collapse>

		<view class="flex button" v-if="current == 0">
			<button class="f1 m-r-10 button-1" @click="operationFn(1)">转派</button>
			<button class="f1 button-2" @click="operationFn(2)">处理</button>
		</view>
		<view class="flex button" v-if="current == 1">
			<button class="f1 button-2" @click="operationFn(3)">处理</button>
		</view>
	</view>
</template>

<script setup>
	const data = ref({}),
		current = ref(0),
		list = [{
			title: '类型',
			img: 'msg/lx.png',
			key: '类型'
		}, {
			title: '区域',
			img: 'msg/qy.png',
			key: '区域'
		}, {
			title: '归属部门',
			img: 'msg/bm.png',
			key: '归属部门'
		}, {
			title: '发生时间',
			img: 'msg/sj.png',
			key: '告警开始时间'
		}],
		columns = [{
			prop: "originalDeptName",
			label: "原始部门",
			width: 100,
		}, {
			prop: "transferredDeptName",
			label: "转派部门",
			width: 100,
		}, {
			prop: "transferReason",
			label: "转派原因",
			width: 200,
		}, {
			prop: "operator",
			label: "转派人",
			width: 120,
		}, {
			prop: "operateTime",
			label: "转派时间",
			width: 120,
		}],
		columns2 = [{
			prop: "originalDeptName",
			label: "原始部门",
		}, {
			prop: "transferredDeptName",
			label: "转派部门",
		}, {
			prop: "operator",
			label: "转派人",
		}, {
			prop: "operateTime",
			label: "转派时间",
		}],
		tableData = ref([])

	// 接收消息列表页数据：
	onLoad(options => {
		data.value = JSON.parse(options.data);
		current.value = data.value.current;
		queryFn()
	})

	function operationFn(type) {
		uni.navigateTo({
			url: `/pages/message/operation?type=${type}&id=${data.value.编号}&oldDeptName=${data.value.归属部门}&告警状态=${data.value.告警状态}`,
		})
	}

	/******************************查询转派详情******************************/
	import {
		queryWarnTransferRD
	} from "@/api/message";
	const collapse = ref(null)

	function queryFn() {
		queryWarnTransferRD({
			id: data.value.编号
		}).then(res => {
			tableData.value = res
			nextTick(() => {
				collapse.value.init()
			})
		})
	}
</script>

<style lang="scss" scoped>
	.item {
		margin: 0 10px;
		padding: 10px;
		background: #fff;
		border-radius: 8px;
		background-image: url('@/static/img/header.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;

		&-p {
			margin: 8rpx 0;
		}
	}

	.item2 {
		padding: 10px;
		background: #ecf5ff;
		border-radius: 8px;
		background-image: url('@/static/img/header.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;

		+.item2 {
			margin-top: 20rpx;
		}
	}

	.button {
		position: fixed;
		width: 90%;
		bottom: 40rpx;
		left: 5%;

		.button-1 {
			color: #fff;
			background: linear-gradient(285deg, #24C68E 4%, #27DC9C 89%);
		}

		.button-2 {
			color: #fff;
			background: linear-gradient(285deg, #3F7EFC 4%, #59A6FB 89%);
		}
	}

	:deep() {
		uni-button:after {
			border: 0
		}
	}
</style>